import Taro, { useReachBottom } from '@tarojs/taro';
import { View, Image, Text } from '@tarojs/components';
import { AtMessage } from 'taro-ui';
import "taro-ui/dist/style/components/button.scss"; // 按需引入
import { useState, useEffect } from 'react';
import Card from '@/components/Card';
import Return from '@/components/Return';
import Header from '@/components/header';
import { getThemedayList } from '@/api/application/thematicday';
import css from './index.module.less';
import { noactivity } from "../image.js";

/**
 * 应用/主题党日
 */
export default function ThematicDayList() {
  // 是否有主题党日活动
  const [daysFlag, setDaysFlag] = useState(true);
  const [daysList, setDaysList] = useState([]);
  //页面数据
  const [pageData, setPageData] = useState({ page: 1, pageSize: 7 });
  const [totalCount, setTotalCount] = useState(0);

  const [userInfo, setUserInfo] = useState({});
  useEffect(() => {
    Taro.getStorage({
      key: 'userInfo',
      success: function (a) {
        setUserInfo(a.data);
        if (a.data.isAudited !== 1) {
          Taro.atMessage({
            'message': '您还未进行认证',
            'type': 'error',
            'duration': 2000
          });
        } else {
          getThemedayList(pageData.page, pageData.pageSize).then((res) => {
            if (res.code === 200) {
              setDaysList(res.data);
              setTotalCount(res.totalCount);
              if (res.data.length === 0 || res.data === []) {
                setDaysFlag(false);
              } else {
                setDaysFlag(true);
              }
            }
          });
        }
      }
    });
  }, []);

  useReachBottom(() => {
    if (daysList.length < totalCount) {
      getThemedayList(pageData.page + 1, pageData.pageSize).then((res) => {
        if (res.code === 200) {
          setDaysList([...daysList, ...res.data]);
        }
      });
      setPageData({ page: pageData.page + 1, size: pageData.size });
    }
  });

  const clickCard = (e) => {
    Taro.navigateTo({ url: `./themedayDtl/index?id=${e.mpEvent.currentTarget.id}` });
  };

  return (
    <View className={css.home}>
      <Header message='主题党日' left='140px' />
      <Return />
      <View className={css.content} >
        <AtMessage />
        {
          userInfo.isAudited !== 1 ? <View className={css.noAudited}><View>您还未进行认证</View></View> :
            <View className={css.audited}>
              {daysFlag ?
                <View>
                  {(daysList === [] && daysList.length === 0) ? '' : daysList.map((item) => {
                    const info = {};
                    info.text = `${item.month}月|` + item.title;
                    info.date = item.releaseTime;
                    info.school = item.organizationName;
                    return (
                      <View key={item.id} id={item.id} onClick={clickCard}>
                        <Card info={info} />
                      </View>
                    );
                  })
                  }
                </View> :
                <View className={css.noActivity}>
                  <Image className={css.noActivityImage} src={noactivity}></Image>
                  <Text className={css.font}>暂无主题党日活动</Text>
                </View>
              }
            </View>

        }
      </View>

    </View>
  );
}